<template>
  <div class="info_item">
    <el-card>
      <div class="title_view" @click="clickAllMessage">
        <div>
          <img src="@/assets/image/msg.png" alt="" />
          <span>消息发布</span>
        </div>
        <img src="@/assets/image/arrow.png" alt="" />
      </div>
      <div class="line_view"></div>
      <div class="list_view">
        <div class="list_div" v-for="(item, index) in list" :key="index"  @click="clickMessageeDetail(item)">
          <div>
            <img src="@/assets/image/arrow_2.png" alt="" />
            <span>{{ item.title }}</span>
          </div>
          <span
            >{{ item.date }} <span>{{ item.content }}</span></span
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    list: Array,
  },
  computed: {},
  methods: {
    clickAllMessage() {
        this.$emit('sendAction', {type: 'message', index: 0})
    },
    clickMessageeDetail(item) {
        this.$emit('sendAction', {type: 'message', index: 1, item: item})
    }
  },
};
</script>

<style lang="scss" scoped>
.info_item {
  width: 25rem;
  height: 23.125rem;
  margin-top: 0.94rem;
}
.el-card {
  width: 100%;
  height: 100%;
  display: flex;
  //overflow-y: auto;
  flex-direction: column;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}
.title_view {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  img {
    width: 0.625rem;
    height: 0.94rem;
  }
  div img {
    width: 0.94rem;
    height: 0.94rem;
  }
  div span {
    font-size: 1.125rem;
    color: rgb(237, 111, 45);
    margin-left: 1rem;
  }
}
.line_view {
  background-color: #ddd;
  height: 0.06rem;
  margin-top: 1rem;
}
.list_view {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  height: 16.5rem;
  //overflow-y: scroll;
}
.list_div {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  div {
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
      width: 1rem;
      height: 1rem;
    }
    span {
      font-size: 1rem;
      color: #333;
      margin-left: 0.625rem;
      //overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  span {
    font-size: 0.875rem;
    color: #999;
    margin-left: 1.625rem;
  }
}
</style>
